<!-- 作者:高翔宇 时间:2024/6/13 周四 20:40 -->
<script setup lang="ts">
import {MediaVerifyType} from "@/api/user/type.ts";
import DrawerEditInfo from "@/views/user/info/modules/accountSetting/DrawerEditInfo.vue";
import {onMounted, reactive, ref} from "vue";
import {useUserStore} from "@/store";
import MyRow from "@/views/user/info/components/MyRow.vue";

const userStore = useUserStore()
// 是否显示骨架屏
const showSkeleton = ref(true)

onMounted(() => {
  userStore.getUserInfo().then(() => {
    formModel.username = userStore.userInfo.username
    formModel.introduction = userStore.userInfo.introduction
  }).finally(() => {
    showSkeleton.value = false
  })
})
// 是否显示抽屉
const drawer = ref(false)

const formModel = reactive({
  username: '',
  introduction: '',
})
</script>

<template>
  <!-- 骨架屏 -->
  <el-card v-if="showSkeleton" class="accountSetting">
    <el-skeleton style="--el-skeleton-circle-size: 100px" animated>
      <template #template>
        <el-skeleton-item variant="circle"/>
      </template>
    </el-skeleton>
    <el-skeleton animated/>
  </el-card>
  <el-card v-else class="accountSetting">
    <my-row>
      <template #left>
        <el-avatar :size="60" :src="userStore.userInfo.avatar" @error="true"/>
      </template>
      <template #center>
        <div class="user-info">
          <div class="username" style="margin-bottom: 20px">{{ userStore.userInfo?.username || '暂无用户名' }}
          </div>
          <div class="signature">签名：<u>{{ userStore.userInfo?.introduction || '暂无签名' }}</u></div>
        </div>
      </template>
      <template #right>
        <el-button type="primary" size="large" round plain @click="drawer = true">修改信息</el-button>
      </template>
    </my-row>
    <my-row>
      <template #left>
        认证类型
      </template>
      <template #center>
        <span v-if="userStore.userInfo?.mediaVerifyType === MediaVerifyType.Unverified">未认证</span>
        <span
            v-else-if="userStore.userInfo?.mediaVerifyType === MediaVerifyType.PersonalVerified">个人认证</span>
        <span v-else-if="userStore.userInfo?.mediaVerifyType === MediaVerifyType.MediaVerified">企业认证</span>
      </template>
      <template #right>
        <el-link v-if="userStore.userInfo?.mediaVerifyType === 0" type="primary">去认证</el-link>
        <el-link v-else type="primary">组织机构认证</el-link>
      </template>
    </my-row>
    <my-row>
      <template #left>
        所在地
      </template>
      <template #center>
        暂无
      </template>
      <template #right>
        <el-link type="primary" plain>修改地址</el-link>
      </template>
    </my-row>
  </el-card>
  <!-- 抽屉：修改信息 -->
  <drawer-edit-info v-model:show="drawer"/>
</template>

<style scoped lang="scss">
</style>
